<template>
    <div>
        <Loading v-if="isShow"/>
        <div class="backbtn">
            <i class="el-icon-arrow-left" @click="goBack()"></i>
        </div>
        <el-form :model="userForm" ref="userForm" label-width="15vw">
            <el-form-item label="用户名" prop="uname">
                <el-input v-model="userForm.uname"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phonenum">
                <el-input v-model="userForm.phonenum"></el-input>
            </el-form-item>
            <div class="regbtn">
                <div class="denglu" @click="onSign()">立即登录</div>
            </div>
        </el-form>
    </div>
</template>

<script>
    import Loading from "../../components/common/animate";
    export default {
        name: "sign",
        data() {
            return {
                userForm: {
                    uname: '',
                    phonenum: ''
                },
                isShow: false
            }
        },
        components: { Loading },
        methods: {
            onSign() {
                if (this.userForm.uname && this.userForm.phonenum) {
                    this.isShow = true;
                    this.$http.post('/api/sign/', this.userForm)
                        .then(({data, config}) => {
                            console.log(data, config)
                            if (data.data.length !== 0) {
                                window.sessionStorage.clear();
                                window.sessionStorage.setItem('uname', data.data[0].uname);
                                window.sessionStorage.setItem('phonenum', data.data[0].phonenum);
                                window.sessionStorage.setItem('imgbase', data.data[0].imgbase);
                                this.$message({
                                    message: '登录成功！',
                                    type: 'success'
                                });
                                this.isShow = false;
                                this.$router.push('/index');
                            } else {
                                this.$message({
                                    message: '用户名或号码错误！',
                                    type: 'warning'
                                });
                                this.isShow = false;
                            }
                        })
                } else {
                    this.$message({
                        message: '请输入用户名和手机号码！',
                        type: 'warning'
                    })
                }
            },
            goBack() {
                this.$router.back(-1);
            }
        }
    }
</script>

<style scoped>
.el-icon-arrow-left {
    font-size: 50px;
    padding: 40px;
}
.el-form-item {
    padding-right: 30px;
}
.el-form {
    padding: 30px;
}

.regbtn, .denglu {
    display: flex;
    justify-content: center;
    align-items: center;
}
.denglu {
    width: 300px;
    height: 80px;
    font-size: 28px;
    margin-top: 20px;
    color: #fff;
    border-radius: 50px;
}
.denglu {
    background-color: #ff6700;
}
</style>